<template>

  <Row :gutter="8" type="flex">
    <Col flex="180px">

      <div class="box-sty">
        <h3>{{ isCompany?'企业':'人员' }}类型</h3>
        <Tabs tab-position="left" v-model:activeKey="queryParam.qualType" @change="tabChange">
          <TabPane
              v-for="item in aptTypes"
              :key="item.code"
              :tab="item.itemName"
          ></TabPane>
        </Tabs>
      </div>

    </Col>
    <Col flex="auto">
      <div class="apt-table">
        <Form :wrapper-col="{ span: 18 }" class="pb20">
          <Row :gutter="[0, 0]">
            <Col :span="12">
              <FormItem :label="isCompany?'企业名称':'人员姓名'">
                <Input
                    v-model:value="queryParam.name"
                    :placeholder="`请输入${isCompany?'企业名称':'人员姓名'}`"
                />
              </FormItem>
            </Col>

            <Col :span="12" class="text-right">
              <Button type="primary" ghost @click="handleReset">重置</Button>
              <Button type="primary" @click="handleSearch">立即查询</Button>
            </Col>
          </Row>
        </Form>
        <div class="tbr-border">
          <Table
              :dataSource="dataSource"
              :columns="columns"
              :loading="loading"
              :pagination="pagination"
              :rowKey="(dataSource,index) => index.toString()"
              @change="handleTableChange"
          >
            <template #num="{ index }">
            <span>{{
                (pagination.current - 1) * pagination.pageSize +
                parseInt(index) + 1
              }}</span>
            </template>
            <template #name="{ text, record }">
              <router-link target="_blank" :to="{path:`/${isCompany?'company':'staff'}/${record.objectId}`}" class="blue">{{ text }}</router-link>
            </template>
            <template #scores="{ text }">
              <span class="red">{{ text }}分</span>
            </template>

            <template #date="{ text , record }">
              {{ parseTime(parseInt(text)) }} ~ {{ parseTime(parseInt(record.creditEdate)) }}
            </template>
          </Table>
        </div>
      </div>
    </Col>
  </Row>


</template>


<script lang="ts" >
import { Tabs, Row, Col, Form, Input, Button, Table  } from "ant-design-vue";
import { defineComponent, ref, onMounted, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import { getAptCreditRecordList  , pageConfig , comTypes , aType , personTypes} from '/@/api/public';
import { parseTime } from '/@/utils';

interface queryConfig {
  objectType: string;
  qualType: string;
  name: string;
  current: number;
  size: number;
}


export default defineComponent({
  name: "aptNotice",
  components: {
    Tabs,
    TabPane: Tabs.TabPane,
    TabContent: Tabs.TabContent,
    Row,
    Col,
    Form,
    FormItem: Form.Item,
    Input,
    Button,
    Table
  },
  setup() {
    const aptTypes = ref<aType[]>([]);
    const { params } = toRefs(useRoute());
    const dataSource = ref<unknown[]>([])
    const colType:string =  params.value.type as string;
    const paginationRef = ref<pageConfig>({
      current: 1,
      total: 0,
      pageSize: 10 //每页中显示10条数据
    })

    const loading = ref<boolean>(true);
    const isCompany:boolean = colType === '7';
    let queryParam = reactive<queryConfig>({
      objectType: isCompany?'1':'2',
      qualType: isCompany?'APP_XYPJ_TYPE_SG':'APP_XYPJ_TYPE_ZJ',
      name: "",
      current: 1,
      size: 10
    })

    const tabChange = () => {
      getTableList();
    }

    const handleTableChange = (data: pageConfig) => {
      paginationRef.value = data;
      queryParam.current = data.current;
      queryParam.size = data.pageSize;
      getTableList();
    }

    const getTableList = async () => {
      loading.value = true;
      let data = await getAptCreditRecordList(queryParam);
      paginationRef.value.total = data.total;
      paginationRef.value.pageSize = data.size;
      dataSource.value = data.records;
      loading.value = false;
    }



    const handleSearch = async () => {
      queryParam.current = 1;
      paginationRef.value.current =  1;
      await getTableList();
    }

    const handleReset = () => {
      paginationRef.value.current =  1;
      Object.assign(queryParam,{
        name: "",
        current: 1
      })
      getTableList();
    }

    onMounted(() => {
      aptTypes.value = isCompany?comTypes:personTypes
      getTableList();
    });

    const columns = [
      {
        title: "序号",
        align:"center",
        slots: { customRender: 'num' }
      },
      {
        title: isCompany?"企业名称":"人员姓名",
        width: 280,
        dataIndex: "objectName",
        slots: { customRender: 'name' }
      },
      {
        title: "指标名称",
        width: 280,
        dataIndex: "creditName"
      },
      {
        title: "信用分值",
        width: 100,
        align:'center',
        dataIndex: "creditScore",
        slots: { customRender: 'scores' }
      },
      {
        title: "公示日期",
        dataIndex: "creditSdate",
        slots: { customRender: 'date' }
      }
    ]

    return {
      aptTypes, queryParam, dataSource, columns, loading, pagination: paginationRef ,isCompany,
      parseTime, tabChange, getTableList, handleSearch, handleReset, handleTableChange
    };

  },
});
</script>
<style lang="less" scoped>
::v-deep(.ant-table){
  .ant-table-body {
    border: 1px solid #f0f0f0;
    border-bottom: none;
  }

  .ant-table-placeholder {
    border-right: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
  }
}

::v-deep(.ant-row){
  .ant-col-4{
    padding-top: 4px !important;
  }
}

::v-deep(.ant-tabs){
  .ant-tabs-left-bar{
    width: 100%;
  }
}

.apt-table{
  width: 100%;
}
</style>


